<template>
  <div class="flex justify-center space-x-6">
    <button
      v-for="(item, index) in tabsList"
      :key="item.id"
      class="flex justify-center items-center font-medium transition text-base py-2 px-4 rounded-xl cursor-pointer"
      :class="[
        item.id === modelValue
          ? 'bg-black text-white'
          : 'bg-[#ededed] text-black hover:bg-gray-200'
      ]"
      @click="handleTabClick(item, index)"
    >
      {{ item.name }}
    </button>
  </div>
</template>

<script setup>
import { computed, toRaw } from 'vue';

const props = defineProps({
  isAll: {
    type: Boolean,
    default: true,
  },
  tabs: {
    type: Array,
    default: () => [],
  },
  modelValue: {
    required: true,
  },
});

const emit = defineEmits(['change', 'update:modelValue']);

const tabsList = computed(() => {
  if (props.isAll) {
    return [
      {
        name: '全部',
        id: '0',
      },
      ...props.tabs,
    ];
  }
  return props.tabs;
});

const handleTabClick = (item, index) => {
  const rawItem = toRaw(item);
  emit('change', rawItem, index);
  emit('update:modelValue', rawItem.id);
};
</script>
